var canvasDom = document.createElement("canvas")
document.body.append(canvasDom);
canvasDom.width = 440 * 2;
canvasDom.height = 576 *2;
var context = canvasDom.getContext("2d");
var imgdata = context.getImageData(0, 0, canvasDom.width, canvasDom.height)
var { Point } = require("../Point")

var w = canvasDom.width;
var h = canvasDom.height;
// var point1x = Math.random() * w;
// var point1y = Math.random() * h;
// var point2x = Math.random() * w;
// var point2y = Math.random() * h;
// var point3x = Math.random() * w;
// var point3y = Math.random() * h;

var point1x = w / 2;
var point1y = h / 6;
var point2x = w / 3;
var point2y = h * 2 / 3;
var point3x = w * 2 / 3;
var point3y = h * 2 / 3;
console.log({ w, h })

var t = 0;
function test1() {
	var data = imgdata.data;
	t += 0.2
	var R = 300;
	var p1x = point1x + Math.cos(t) * R;
	var p1y = point1y + Math.sin(t) * R
	var p2x = point2x + Math.cos(t) * R;
	var p2y = point2y + Math.sin(t) * R
	var p3x = point3x + Math.cos(t) * R;
	var p3y = point3y + Math.sin(t) * R;
	console.log({ p1x, p1y })
	for (let index = 0, len = data.length / 4; index < len; index++) {
		var w0 = index % w;
		var h0 = (index - w0) / w;
		

		var len1 = Point.len({ x: w0, y: h0 }, { x: p1x, y: p1y })
		
		var len2 = Point.len({ x: w0, y: h0 }, { x: p2x, y: p2y })
		
		var len3 = Point.len({ x: w0, y: h0 }, { x: p3x, y: p3y })

		// if (len1 <= 50 || len2 <= 50 || len3 <= 50) {
		// 	data[index * 4] = data[index * 4 + 1] = data[index * 4 + 2] = 0;
		// 	data[index * 4 + 3] = 255;
		// 	continue;
		// }
		data[index * 4] = 1 / (1 + len1 / len2 + len1 / len3) * 255
		data[index * 4 + 1] = 1 / (len2 / len1 + 1 + len2 / len3) * 255
		data[index * 4 + 2] = 1 / (len3 / len1 + len3 / len2 + 1) * 255

		// data[index * 4] = len1 / (len1 + len2 + len3) * 255
		// data[index * 4 + 1] = len2 / (len1 + len2 + len3) * 255
		// data[index * 4 + 2] = len3 / (len1 + len2 + len3) * 255

		// data[index * 4] = len1 ** 2 / (len1 ** 2 + len2 ** 2 + len3 ** 2) * 255
		// data[index * 4 + 1] = len2 ** 2 / (len1 ** 2 + len2 ** 2 + len3 ** 2) * 255
		// data[index * 4 + 2] = len3 ** 2 / (len1 ** 2 + len2 ** 2 + len3 ** 2) * 255

		data[index * 4 + 3] = 255
	}
	context.putImageData(imgdata, 0, 0)
}

function test2() {
	var data = imgdata.data;

	for (let index = 0, len = data.length / 4; index < len; index++) {
		var w0 = index % w;
		var h0 = (index - w0) / w;
		
		// var len1 = Point.len({ x: w0, y: h0 }, { x: point1x, y: point1y })
		// 
		// var len2 = Point.len({ x: w0, y: h0 }, { x: point2x, y: point2y })
		// 
		// var len3 = Point.len({ x: w0, y: h0 }, { x: point3x, y: point3y })
		// var k1 = Math.atan((point1y - h0) / (point1x - w0))
		// var k2 = Math.atan((point2y - h0) / (point2x - w0))
		// var k3 = Math.atan((point3y - h0) / (point3x - w0))
		// 		
		var k1 = Math.sin(Point.len({ x: w0, y: h0 }, { x: point1x, y: point1y }) * 0.04)
		
		var k2 = Math.sin(Point.len({ x: w0, y: h0 }, { x: point2x, y: point2y }) * 0.04)
		
		var k3 = Math.sin(Point.len({ x: w0, y: h0 }, { x: point3x, y: point3y }) * 0.04)

		data[index * 4] = k1 / (k1 + k2 + k3) * 255
		data[index * 4 + 1] = k2 / (k1 + k2 + k3) * 255
		data[index * 4 + 2] = k3 / (k1 + k2 + k3) * 255
		data[index * 4 + 3] = 255
	}
	context.putImageData(imgdata, 0, 0)
}
// test2
setInterval(test1, 10)
// test1()

var clickStat = false
canvasDom.onmousedown = function (params) {
	clickStat = true;
}
var hoverPoint = [];
canvasDom.onmouseup = function (params) {
	clickStat = false;
}
canvasDom.addEventListener("mousemove", function (params) {
	if(clickStat)
	hoverPoint.push({ x: params.clientX, y: params.clientY })
})
globalThis.hoverPoint = hoverPoint